<template>
	<view>
		<text @click="showPopClick" class="rightTit">筛选</text>
		
		
		<rightPopup :pop-show="popShow" :colors="colors" :classList="classList" @change="changeClick"
			@sureClick="sureClick" @hideClick="hideright"></rightPopup>
		
		
		
		
		
		
		
		<view class="baogao_box">
		 <u-tabs :list="list1" @click="click"></u-tabs>
		 <ul class="baogao_list">
			 <li>
				 <view class="baogao_list_top">
				 <view class="baogao_list_top_top">
					 <image src="../../../static/user.png" mode="" class="logoSTou"></image>
				 	<view><text class="zero">赵小刚</text><text class="zzz">销售经理</text></view>
				<view><text class="zzz">2019-08</text><text class="zzz">工作月报</text></view>
				 </view>
				 </view>
				 <view class="baogao_list_center">
					 <text class="aA">客户对产品意向很高，但是希望价格能有优惠。</text>
				 </view>
				 <view class="baogao_list_right">
				 	<text> 2019-08-23 22:31</text>
					<text>未批阅</text>
				 </view>
			 </li>
			 <li>
			 			 <view class="baogao_list_top">
			 			 <view class="baogao_list_top_top">
			 				 <image src="../../../static/user.png" mode="" class="logoSTou"></image>
			 			 	<view><text class="zero">赵小刚</text><text class="zzz">销售经理</text></view>
			 			<view><text class="zzz">2019-08</text><text class="zzz">工作月报</text></view>
			 			 </view>
			 			 </view>
			 			 <view class="baogao_list_center">
			 				 <text class="aA">客户对产品意向很高，但是希望价格能有优惠。</text>
			 			 </view>
			 			 <view class="baogao_list_right">
			 			 	<text> 2019-08-23 22:31</text>
			 				<text>未批阅</text>
			 			 </view>
			 </li>
			 <li>
			 			 <view class="baogao_list_top">
			 			 <view class="baogao_list_top_top">
			 				 <image src="../../../static/user.png" mode="" class="logoSTou"></image>
			 			 	<view><text class="zero">赵小刚</text><text class="zzz">销售经理</text></view>
			 			<view><text class="zzz">2019-08</text><text class="zzz">工作月报</text></view>
			 			 </view>
			 			 </view>
			 			 <view class="baogao_list_center">
			 				 <text class="aA">客户对产品意向很高，但是希望价格能有优惠。</text>
			 			 </view>
			 			 <view class="baogao_list_right">
			 			 	<text> 2019-08-23 22:31</text>
			 				<text>未批阅</text>
			 			 </view>
			 </li>
			 <li>
			 			 <view class="baogao_list_top">
			 			 <view class="baogao_list_top_top">
			 				 <image src="../../../static/user.png" mode="" class="logoSTou"></image>
			 			 	<view><text class="zero">赵小刚</text><text class="zzz">销售经理</text></view>
			 			<view><text class="zzz">2019-08</text><text class="zzz">工作月报</text></view>
			 			 </view>
			 			 </view>
			 			 <view class="baogao_list_center">
			 				 <text class="aA">客户对产品意向很高，但是希望价格能有优惠。</text>
			 			 </view>
			 			 <view class="baogao_list_right">
			 			 	<text> 2019-08-23 22:31</text>
			 				<text>未批阅</text>
			 			 </view>
			 </li>
			 <li>
			 			 <view class="baogao_list_top">
			 			 <view class="baogao_list_top_top">
			 				 <image src="../../../static/user.png" mode="" class="logoSTou"></image>
			 			 	<view><text class="zero">赵小刚</text><text class="zzz">销售经理</text></view>
			 			<view><text class="zzz">2019-08</text><text class="zzz">工作月报</text></view>
			 			 </view>
			 			 </view>
			 			 <view class="baogao_list_center">
			 				 <text class="aA">客户对产品意向很高，但是希望价格能有优惠。</text>
			 			 </view>
			 			 <view class="baogao_list_right">
			 			 	<text> 2019-08-23 22:31</text>
			 				<text>未批阅</text>
			 			 </view>
			 </li>
			 <li>
			 			 <view class="baogao_list_top">
			 			 <view class="baogao_list_top_top">
			 				 <image src="../../../static/user.png" mode="" class="logoSTou"></image>
			 			 	<view><text class="zero">赵小刚</text><text class="zzz">销售经理</text></view>
			 			<view><text class="zzz">2019-08</text><text class="zzz">工作月报</text></view>
			 			 </view>
			 			 </view>
			 			 <view class="baogao_list_center">
			 				 <text class="aA">客户对产品意向很高，但是希望价格能有优惠。</text>
			 			 </view>
			 			 <view class="baogao_list_right">
			 			 	<text> 2019-08-23 22:31</text>
			 				<text>未批阅</text>
			 			 </view>
			 </li>
		 </ul>
		 
		 
		 
		 
		 
		 
		 	<u-action-sheet :actions="list" @select="selectClick" :title="title" :show="show"></u-action-sheet>
		 			<view @click="show = true" class="square">+</view>
		 
		</view>
	</view>
</template>

<script>
	import rightPopup from "../../../components/cc-rightPopup/cc-rightPopup.vue"
		export default {
			components: {
				rightPopup
			},
			data() {
				return {
					colors: '#fa436a',
					popShow: false,
					classList: [{
						name: '报告类型',
						id: 1,
						child: [{
							name: '全部',
							id: 10,
							current: true
						}, {
							name: '日报',
							id: 11,
							current: false
					
						}, {
							name: '周报',
							id: 12,
							current: false
					
						}, {
							name: '月报',
							id: 13,
							current: false
					
						}]
					}, {
						name: '批阅状态',
						id: 2,
						child: [{
								name: '全部',
								id: 20,
								current: false
					
							}, {
								name: '已批阅',
								id: 21,
								current: false
					
							}, {
								name: '未批阅',
								id: 22,
								current: false
					
							}
						]
					},
					{
						name: '提交时间',
						id: 3,
						child: [{
								name: '今天',
								id: 20,
								current: false
					
							}, {
								name: '昨天',
								id: 21,
								current: false
					
							}, {
								name: '本周',
								id: 22,
								current: false
					
							},{
								name: '上周',
								id: 23,
								current: false
					
							},{
								name: '本月',
								id: 24,
								current: false
					
							},{
								name: '上月',
								id: 25,
								current: false
					
							}
						]
					}
					
					
					
					
					
					
					
					
					
					],
					title:'标题',
	                list1: [{
	                    name: '全部报告',
	                }, {
	                    name: '我提交的',
	                }, {
	                    name: '提交给我的'
	                }, {
	                    name: '抄送给我的'
	                },{
						name:'未读报告'
					},{
						name:"已读报告"
					}],
					list: [
									{
										name:'工作日报'
									},
									{
										name: '工作周报'
									},{
										name: '工作月报'
									}
								],
								show: false
				}
			},
			methods: {
				sureClick(paramDict, selArr) {
					this.popShow = false;
					uni.showModal({
						title: '筛选数据',
						content: '筛选价格数据 = ' + JSON.stringify(paramDict) + ' 筛选按钮数据= ' + JSON.stringify(selArr)
					})
				
				},
				changeClick(arr) {
					// 适配小程序 样式需要在父级改变
					this.classList = arr;
				},
				showPopClick() {
				
					this.popShow = true;
				},
				
				hideright() {
					this.popShow = false;
				},
	            click(item) {
	                console.log('item', item);
	            },
				selectClick(index){
					uni.navigateTo({
						url:"/pages/my/xinjianPage/xinjianPage"
					})
				this.show=false
			console.log(index)
		}
			}
		}
</script>

<style>
	.rightTit{
		display: inline-block;
		width: 100%;
		height: 30px;
		font-size: 12px;
		color: #0079fe;
		text-align: right;
		background-color:rgba(242, 242, 242, 0.5);
		align-items: center;
	}
	.baogao_list_right>text:nth-child(2){
		margin-right: 10px;
	}
	.square{
		width: 50px;
		height: 50px;
		border-radius: 40px;
		background-color: #0079fe;
		font-size: 24px;
		color: white;
		font-weight: bold;
		position: fixed;
		top: 400px;
		left: 300px;
		line-height: 50px;
		text-align: center;
	}
	.baogao_list_right{
		/* width: 250px; */
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		color: #999999;
		margin-left: 100px;
		margin-top: 8px;
	}
	.baogao_list_center{
		text-align: right;
		margin-right: 20px;
	}
	.baogao_list_top_top>view>text{
		margin: 3px;
	}
	.zzz{
		font-size: 12px;
		color: #999999;
	}
	.aA{
		font-size: 12px;
		color: #666666;
		width: 100%;
	}
	.zero{
		font-size: 15px;
		color: #666666;
	}
	.baogao_list_top_top{
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.logoSTou{
		width:50px;
		height: 50px;
	}
	.baogao_list_top{
		width: 100%;
		height: 35px;
	}
	.baogao_box{
		background-color:rgba(242, 242, 242, 0.5);
	}
*{
	padding: 0;
	margin: 0;
	list-style-type: none;
}
.baogao_list>li{
	width:100vw;
	height: 105px;
	background-color: white;
	display: flex;
	flex-direction: column;
	margin-top: 8px;
}
</style>
